<template>
  <div :class="['flex', { 'flex-col': align === 'vertical' }]">
    <router-link class="item" to="/">产品</router-link>
    <a class="item" href="https://www.baidu.com" target="_blank">社区</a>
    <router-link class="item" to="/study">学习</router-link>
    <router-link class="item" to="/about">关于</router-link>
  </div>
</template>
<script setup lang="ts">
import type { PropType } from 'vue'
defineProps({
  align: {
    type: String as PropType<'vertical' | 'horizanal'>
  }
})
</script>

<style scoped lang="scss">
.item {
  @apply text-red-500 text-2xl px-4 py-2;

  &:hover {
    @apply font-medium;
  }
}
</style>
